<template>
  <view class="page container">
    <u-form
      :model="basicForm"
      :rules="rules"
      labelPosition="top"
      ref="form"
      labelWidth="auto"
      :labelStyle="{
      	fontSize: '14px',
      	color: '#B2B2B2',
      	lineHight: '20px'
      }"
    >
      <view class="basic-style">
        <u-form-item label="物料大类" prop="provisionBroad" required>
        		<view style="width:100%" @click="show1 = true">
        			<u--input placeholder="请选择物料大类" suffixIcon="arrow-down-fill"
        				:suffixIconStyle="{color: '#B2B2B2'}" v-model="basicForm.provisionBroad_dictText" disabled
        				disabledColor="#fff"></u--input>
        		</view>
        		<u-picker :show="show1" :columns="erpPurchaseCategory" keyName="categoryName"
        			@cancel="show1 = false" @confirm="confirm1"></u-picker>
        	</u-form-item>
        	<u-form-item label="物料小类" prop="provisionSmall" required>
        		<view style="width:100%" @click="pickProvisionSmall">
        			<u--input placeholder="请选择物料小类" suffixIcon="arrow-down-fill"
        				:suffixIconStyle="{color: '#B2B2B2'}" v-model="basicForm.provisionSmall_dictText" disabled
        				:disabledColor="basicForm.provisionBroad?'#fff':'#f5f7fa'"></u--input>
        		</view>
        		<u-picker :show="show2" :columns="erpPurchaseCategoryChild" keyName="categoryName"
        			@cancel="show2 = false" @confirm="confirm2"></u-picker>
        	</u-form-item>
        	<u-form-item label="物料名称" prop="materialName" required>
        		<!-- <view style="width:100%" @click="pickMaterial">
        			<u--input placeholder="请选择物料名称" suffixIcon="arrow-down-fill"
        				:suffixIconStyle="{color: '#B2B2B2'}" v-model="basicForm.materialName" disabled
        				:disabledColor="basicForm.provisionSmall?'#fff':'#f5f7fa'"></u--input>
        		</view> -->
						<h-select-material-input-popup
						  style="width: 100%"
						  v-model="basicForm.materialName"
						  placeholder="请选择物料名称"
						  border="surround"
						  :materialFlag="true"
						  auditStatus="2"
							:multi="true"
							suffixIcon="arrow-down-fill"
							:suffixIconStyle="{color: '#B2B2B2'}"
						  :provisionSmall="basicForm.provisionSmall"
						  @change="materialNameBack"
						></h-select-material-input-popup>
        	</u-form-item>
        </u--form>
      </view>

      <view class="space-x-1 mt-1" style="display: flex">
        <u-button type="primary" text="保存" :loading="loading" @click="onSubmit"></u-button>
        <u-button type="primary" text="关闭" :loading="loading" @click="onClose"></u-button>
      </view>
    </u-form>
  </view>
</template>

<script>
import {
	erpPurchaseCategoryList, //物料大类
	erpPurchaseCategoryChildList, //物料小类
} from '@/api/index.js'
export default {
  name: 'purchaseRecipientsForm',
  props: {
    teamId: {
			type: [Number, String],
			default: '',
		},
    companyId: {
			type: [Number, String],
			default: '',
		},
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      basicForm: {
        provisionBroad: '', //物料大类id
        provisionBroad_dictText: '', //物料大类
        provisionSmall: '', //物料小类id
        provisionSmall_dictText: '', //物料小类
        id: '', //物料id
        materialName: '', //物料名称
        unit_dictText: '', //单位
        materialBill: '', //编码
        specification: '', //规格型号
        brand: '', //品牌
        recipientsNum: undefined, //领用数量
        companName: '', //供应商
        remark: '', //物料用途
      },
      rules: {
        provisionBroad: [{
        	required: true,
        	message: '请选择物料大类!',
        	trigger: 'change'
        }],
        provisionSmall: [{
        	required: true,
        	message: '请选择物料小类!',
        	trigger: 'change'
        }],
        materialName: [{
        	required: true,
        	message: '请选项物料名称!',
        	trigger: 'change'
        }],
      },
			erpPurchaseCategory: [], //物料大类枚举
			erpPurchaseCategoryChild: [], //物料小类枚举
			show1: false,
			show2: false,
			materialDetail: []
    }
  },
	mounted() {
		this.getPurchaseCategoryList()
	},
  methods: {
		materialNameBack(material) {
			this.materialDetail = material
		},
    reset() {
      this.$refs.form.resetFields()
			this.materialDetail = []
    },
		// 获取物料大类枚举
		getPurchaseCategoryList() {
			erpPurchaseCategoryList().then(res => {
				if (res.success) {
					this.erpPurchaseCategory.push(res.result || [])
				}
			})
		},
		// 获取物料小类枚举
		getPurchaseCategoryChildList(parentId) {
			this.erpPurchaseCategoryChild = []
			erpPurchaseCategoryChildList({
				parentId
			}).then(res => {
				if (res.success) {
					this.erpPurchaseCategoryChild.push(res.result || [])
				}
			})
		},
		pickProvisionSmall() {
			if (!this.basicForm.provisionBroad) return
			this.show2 = true
		},
		pickMaterial() {
			const that = this
			if (!this.basicForm.provisionSmall) return
			uni.navigateTo({
				url: `/pages/synergy/pickMaterialList?provisionSmall=${this.basicForm.provisionSmall}`,
				events:{
					pageEvent: function(data){
						if(data){
							that.$set(that.basicForm,'materialName',data.materialName)
							that.$set(that.basicForm,'unit_dictText',data.unit_dictText)
							that.$set(that.basicForm,'materialBill',data.materialBill)
							that.$set(that.basicForm,'specification',data.specification)
							that.$set(that.basicForm,'brand',data.brand)
							that.$forceUpdate()
						}
						
					}
				},
				success: function(res) {
					res.eventChannel.emit('pageEvent')
				}
			})
		},
		// 确认选择物料大类
		confirm1(e) {
			this.basicForm.provisionBroad = e.value[0].id
			this.basicForm.provisionBroad_dictText = e.value[0].categoryName
			this.basicForm.provisionSmall = ''
			this.basicForm.provisionSmall_dictText = ''
			this.getPurchaseCategoryChildList(e.value[0].id)
			this.show1 = false
		},
		// 确认选择物料小类
		confirm2(e) {
			this.basicForm.provisionSmall = e.value[0].id
			this.basicForm.provisionSmall_dictText = e.value[0].categoryName
			this.$set(this.basicForm, 'materialName', null)// 物料名称
			this.materialDetail = [] // 物料数组
			this.show2 = false
		},
    async onSubmit() {
      await this.$refs.form.validate()
      if (!this.index) {
        this.$emit('submit', this.basicForm, this.materialDetail)
      } else {
        this.$emit('submit', [this.basicForm, this.index],this.materialDetail)
      }
			this.$refs.form.resetFields()
			this.materialDetail = []
    },
    onClose() {
      this.$emit('close')
			this.$refs.form.resetFields()
			this.materialDetail = []
    },
  }
}
</script>

<style scoped></style>
